<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>数据源管理页面</title>
<!-- 设置网页图标 -->
<link rel="shortcut icon" href="../../images/favicon.png" type="image/x-icon" />
<!-- 引入CSS -->
<link rel="stylesheet" href="../../layui/css/layui.css">
<link rel="stylesheet" href="../css/mystyle.css">
<!-- 引入JS -->
<script src="../../layui/layui.js"></script>
<script>
layui.use([ 'layer', 'table', 'form' ], function() {
	var $ = layui.$,layer = layui.layer,table = layui.table,form = layui.form;
	table.render({
		elem : '#table_databases',
		id:'layer_table_databases',
		toolbar : '#toolbar_seach',
		title : '数据源表格',
		size : 'lg',
		defaultToolbar : [],
		cols: [[
             {type:'numbers', width:100, title: '编号', sort: true},
             {field:'id', width:100, title: 'ID', hide: true},
             {field:'dbName', width:200, title: '数据源名称', sort: true},
             {field:'url', title: '连接字符串'},
             {field:'driver', width:200, title: '驱动路径'},
             {field:'username', width:160, title: '用户名'},
             {field:'password', width:200, title: '密码'},
             {field:'schema', width:120, title: '数据库', sort: true},
             {field:'dbType', width:120, title: '类型'},
             {fixed: 'right', title:'操作', align:'center', toolbar: '#colbar_tools', width:300}
	       	]],
		url : '/db/configs',
		height : 'full-5',
		page : true,
		limit : 20,
		limits : [10,20,30,40,60,80,100,200,500],
		even : true,
		request : {
			pageName : 'page',
			limitName : 'rows'
		},
		response : {
			statusCode : 200
		},
		parseData : function(res) {
			return {
				"code" : res.code,
				"msg" : res.msg,
				"count" : res.data.total,
				"data" : res.data.rows
			};
		},
		error : function(xhr,status,error){
	        /*错误信息处理*/
	        var data = JSON.parse(xhr.responseText);
	        layer.msg(data.msg);
		}
	});
	/* 查询事件 */
	form.on('submit(btn_seachform_seach)', function(data) {
		table.reload('layer_table_databases',{
			where:{keyword:data.field.keyword}
		},true);
		$('input[name="keyword"]').val(data.field.keyword);
		return false;
	});
	/* 添加按钮事件 */
	$(document).on('click', '#btn_seachform_add', function(){
		/* 弹出新增 */
		layer.open({
			type : 1,
			id : 'layer_panle_add',
			title : '<i class="layui-icon">&#xe61f;</i>&nbsp;添加新的数据源',
			area : [ '800px', '350px' ],
			shade : 0.3,
			closeBtn : 0,
			content : $('#form_add'),
			success: function(layero, index){
				$('#btn_sure_addform').addClass("layui-btn-disabled").attr("disabled",true);
				$('#btn_sure_addform').text('添加').attr('lay-filter','btn_add_addform');
			}
		});
	  });
	/* 行工具栏事件 */
	table.on('tool(table_databases)', function(obj) {
		switch (obj.event) {
		case 'colbar_edit':
			/* 弹出编辑 */
			layer.open({
				type : 1,
				id : 'layer_panle_update',
				title : '<i class="layui-icon">&#xe642;</i>修改'+obj.data.dbName,
				area : [ '800px', '360px' ],
				shade : 0.3,
				closeBtn : 0,
				content : $('#form_add'),
				success: function(layero, index){
					$('#btn_sure_addform').addClass("layui-btn-disabled").attr("disabled",true);
					$('#btn_sure_addform').text('修改').attr('lay-filter','btn_update_addform');
					form.val('form_add',obj.data);
				}
			});
			break;
		case 'colbar_delete':
			layer.confirm('确定删除记录?', {icon : 3,title : '删除提示'}, function(index) {
				/* 调用接口 */
				$.ajax({
					type : "DELETE",
					url : "/db/config/" + obj.data.id,
					contentType : "application/json",
					dataType : "json",
					success : function(data) {
						/* 处理数据 */
						if (data.code == 200) {
							window.parent.location.reload();
						} else {
							layer.msg(data.msg);
						}
					},
					error : function(xhr,status,error){
				        /*错误信息处理*/
				        var data = JSON.parse(xhr.responseText);
				        layer.msg(data.msg);
					}
				});
			});
			break;
		case 'colbar_enter':
			/* 跳转页面 */
			$('#iframe-main', window.parent.document).attr('src','/html/tables#/id='+obj.data.id+'/schema='+obj.data.schema);
			break;
		}
	});
	/* 提交事件 */
	form.on('submit(btn_add_addform)', function(data) {
		/* 调用接口 */
		$.ajax({
			type : "POST",
			url : "/db/config",
			data: JSON.stringify(data.field),
			contentType:"application/json",
			dataType : "json",
			success : function(data) {
				/* 处理数据 */
				if (data.code == 200) {
					window.parent.location.reload();
				}else{
					layer.msg(data.msg);
				}
			},
			error : function(xhr,status,error){
		        /*错误信息处理*/
		        var data = JSON.parse(xhr.responseText);
		        layer.msg(data.msg);
			}
		});
		return false;
	});
	/* 修改事件 */
	form.on('submit(btn_update_addform)', function(data) {
		/* 调用接口 */
		$.ajax({
			type : "PUT",
			url : "/db/config/"+data.field.id,
			data: JSON.stringify(data.field),
			contentType:"application/json",
			dataType : "json",
			success : function(data) {
				/* 处理数据 */
				if (data.code == 200) {
					window.parent.location.reload();
				}else{
					layer.msg(data.msg);
				}
			},
			error : function(xhr,status,error){
		        /*错误信息处理*/
		        var data = JSON.parse(xhr.responseText);
		        layer.msg(data.msg);
			}
		});
		return false;
	});
	/* 测试事件 */
	form.on('submit(btn_test_addform)', function(data) {
		var loading = layer.load(0);
		/* 调用接口 */
		$.ajax({
			type : "POST",
			url : "/db/config/test",
			data: JSON.stringify(data.field),
			contentType:"application/json",
			dataType : "json",
			success : function(data) {
				layer.close(loading);
				/* 处理数据 */
				if (data.code == 200) {
					$('#btn_sure_addform').removeClass("layui-btn-disabled").attr("disabled",false);
					layer.msg('<font color="yellow">数据库连接成功</font>');
				}else{
					layer.msg('<font color="red">'+data.msg+'</font>');
				}
			},
			error : function(xhr,status,error){
		        /*错误信息处理*/
		        var data = JSON.parse(xhr.responseText);
		        layer.msg(data.msg);
			}
		});
		return false;
	});
	/* 取消事件 */
	$('#btn_addform_cancel').click(function() {
		$('#form_add').hide();
		$('#form_add')[0].reset();
		layer.closeAll('page');
	});
});
</script>
<script type="text/html" id="toolbar_seach">
  <div class="layui-fluid">
   <form id="form_seach" class="layui-form layui-form-pane" lay-filter="form_seach">
   <div class="layui-row layui-col-space10">
    <div class="layui-col-md9">
      <input class="layui-input" lay-filter="keyword" name="keyword" lay-verType="tips" lay-verify="" placeholder="数据源名称/数据库/类型/用户名" autocomplete="off">
    </div>
    <div class="layui-col-md3" style="text-align: right;">
      <button type="submit" lay-submit class="layui-btn" lay-filter="btn_seachform_seach"><i class="layui-icon">&#xe615;</i>&nbsp;查询</button>
      <button type="reset" class="layui-btn layui-btn-danger"><i class="layui-icon">&#xe639;</i>&nbsp;清除</button>
      <button type="button" class="layui-btn layui-btn-normal" id="btn_seachform_add"><i class="layui-icon">&#xe61f;</i>&nbsp;添加</button>
    </div>
   </div>
   </form>
  </div>
</script>
<script type="text/html" id="colbar_tools">
  <a class="layui-btn layui-btn-normal" lay-event="colbar_edit">编辑</a>
  <a class="layui-btn layui-btn-danger" lay-event="colbar_delete">删除</a>
  <a class="layui-btn" lay-event="colbar_enter">数据表</a>
</script>
<body>
 <form id="form_add" class="layui-form layui-form-pane" lay-filter="form_add" style="padding: 20px 10px; display: none;">
  <input type="hidden" name="id">
  <div class="layui-fluid">
   <div class="layui-row layui-col-space10">
    <div class="layui-col-md12">
     <label class="layui-form-label">数据源名称</label>
     <div class="layui-input-block">
      <input type="text" name="dbName" lay-verType="tips" lay-verify="required" autocomplete="off" placeholder="请输入" class="layui-input">
     </div>
    </div>
    <div class="layui-col-md6">
     <label class="layui-form-label">数据源类型</label>
     <div class="layui-input-block">
      <select name="dbType" lay-verType="tips" lay-verify="required">
       <option value="">请选择数据库版本</option>
       <option value="MySQL 8.X">MySQL 8.X</option>
       <option value="MySQL 5.X">MySQL 5.X</option>
       <option value="Oracle 11G" disabled>Oracle(待支持)</option>
      </select>
     </div>
    </div>
    <div class="layui-col-md6">
     <label class="layui-form-label">schema</label>
     <div class="layui-input-block">
      <input type="text" name="schema" lay-verType="tips" lay-verify="required" autocomplete="off" placeholder="请输入" class="layui-input">
     </div>
    </div>
    <div class="layui-col-md12">
     <label class="layui-form-label">连接字符串</label>
     <div class="layui-input-block">
      <input type="text" name="url" lay-verType="tips" lay-verify="required" autocomplete="off" placeholder="请输入" class="layui-input">
     </div>
    </div>
    <div class="layui-col-md6">
     <label class="layui-form-label">用户名</label>
     <div class="layui-input-block">
      <input type="text" name="username" lay-verType="tips" lay-verify="required" autocomplete="off" placeholder="请输入" class="layui-input">
     </div>
    </div>
    <div class="layui-col-md6">
     <label class="layui-form-label">密码</label>
     <div class="layui-input-block">
      <input type="password" name="password" lay-verType="tips" lay-verify="required" autocomplete="off" placeholder="请输入" class="layui-input">
     </div>
    </div>
    <div class="layui-col-md12">
     <div class="layui-form-item">
      <div class="layui-input-block" style="text-align: right; top: 10px;">
       <button id="btn_sure_addform" class="layui-btn layui-btn-normal" lay-submit></button>
       <button class="layui-btn layui-btn-warm" lay-filter="btn_test_addform" lay-submit>测试</button>
       <button type="reset" class="layui-btn" lay-filter="btn_reset_add">重置</button>
       <button id="btn_addform_cancel" type="button" class="layui-btn layui-btn-danger">取消</button>
      </div>
     </div>
    </div>
   </div>
  </div>
 </form>
 <table class="layui-hide" id="table_databases" lay-filter="table_databases"></table>
</body>
</html>